<template>
  <div id="home">
    <!-- 顶部导航 -->
    <nav-bar>
      <div slot="center" class="title">购物街</div>
    </nav-bar>
    <scroll ref="homeScroll" :probe-type="3" :pull-up-load="true">
      <!-- 轮播图 -->
      <home-swiper :banners="banners" />
      <!-- 推荐导航 -->
      <home-recommend :recommends="recommends" />
      <!-- 本周流行 -->
      <feature-view />
      <!-- 中部导航 -->
      <tab-control @tabControl="changeList" :tabControlData="['流行', '新款', '精选']" />
      <!-- 商品展示 -->
      <goods-list :goods="goods[goodsType].list" />
    </scroll>
    <back-top v-show="isShow" @click.native="backTop" />
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import Scroll from "components/common/scroll/Scroll";
import BackTop from "components/common/backTop/BackTop";
import TabControl from "components/content/tabControl/TabControl";
import GoodsList from "components/content/goodsList/GoodsList";

import HomeSwiper from "./childComponents/HomeSwiper";
import HomeRecommend from "./childComponents/HomeRecommend";
import FeatureView from "./childComponents/FeatureView";

import { getHomeData, getGoodsListData } from "network/home";

export default {
  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 1, list: [] },
        new: { page: 1, list: [] },
        sell: { page: 1, list: [] }
      },
      goodsType: "pop",
      isShow: false
    };
  },
  components: {
    // 业务内公共组件
    NavBar,
    Scroll,
    BackTop,
    TabControl,
    GoodsList,
    // 首页独有组件
    HomeSwiper,
    HomeRecommend,
    FeatureView
  },
  created() {
    this.homeData(),
      this.goodsData("pop"),
      this.goodsData("new"),
      this.goodsData("sell");
  },
  methods: {
    // 事件监听相关
    changeList(index) {
      switch (index) {
        case 0:
          this.goodsType = "pop";
          break;
        case 1:
          this.goodsType = "new";
          break;
        case 2:
          this.goodsType = "sell";
          break;
      }
    },
    backTop() {
      // 通过$refs取到对应组件，进而取到对应组件内部的属性
      this.$refs.homeScroll.scrollTo(0, 0, 500);
    },

    // 网络请求相关方法
    homeData() {
      getHomeData().then(res => {
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },
    goodsData(type) {
      const page = this.goods[type].page;
      getGoodsListData(type, page).then(res => {
        this.goods[type].list.push(...res.data.data.list);
      });
      this.goods[type].page++;
      this.$refs.homeScroll.scroll.refresh();
    }
  },
  mounted() {
    // 显示隐藏“回到顶部”图标
    this.$refs.homeScroll.on("scroll", position => {
      // console.log('123');
      if (-position.y > 1000) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    });
    this.$refs.homeScroll.on("pullingUp", () => {
      // console.log("上拉加载更多");
      this.goodsData(this.goodsType)
      this.$refs.homeScroll.finishPullUp()
    });
  }
};
</script>
<style>
#home {
  height: 100vh;
  position: relative;
}
.title {
  font-size: 1.25em;
  text-align: center;
  background-color: #ffffff;
}
</style>